<template>
  <div id="app">
    <!--视窗-->
    <div class="viewport" :style="viewportStyle">
      <!--画布-->
      <div class="canvas" :style="canvasStyle">
        <!--页面-->
        <div class="page" :style="pageStyle">
          <div style="width:100px; height: 100px; background-color: green; top:-150px; left: -150px; position: absolute;"></div>
        </div>
        <!--拖拽面板-->
        <div class="drag-panel">
          <!--面板-->
          <div id="move-panel"></div>
          <!--上-->
          <div class="drag-point up"></div>
          <!--右-->
          <div class="drag-point right"></div>
          <!--下-->
          <div class="drag-point down"></div>
          <!--左-->
          <div class="drag-point left"></div>
          <!--左上-->
          <div class="drag-point left-up"></div>
          <!--右上-->
          <div class="drag-point right-up"></div>
          <!--右下-->
          <div class="drag-point right-down"></div>
          <!--左下-->
          <div class="drag-point left-down"></div>
        </div>
      </div>
      <div style="width:100px; height: 100px; background-color: red;"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data: function () {
    return {
      canvasPadding: 100,
      page: {
        // 应该有三个大小：画布大小、页面大小、视窗位置
        width: 2551,
        height: 3437,
        type: 'inner',
        name: '第1页',
        elements: [
          {
            x: 0,
            y: 0,
            width: 100,
            height: 100,
            type: 'shape', // photo,text,decorate,shape
            angle: 135, // 旋转
            fixed: 1, // 锁定
            display: 1, // 显示
            photo: {},
            text: {},
            decorate: {},
            shape: {
              color: 'red'
            }
          },
          {
            x: 150,
            y: 150,
            width: 100,
            height: 100,
            type: 'shape', // photo,text,decorate,shape
            angle: 0, // 旋转
            fixed: 0, // 锁定
            display: 1, // 显示
            photo: {},
            text: {},
            decorate: {},
            shape: {
              color: 'green'
            }
          }
        ]
      }
    }
  },
  computed: {
    viewportStyle: function () {
      return {
        width: '1200px',
        height: '1200px'
      }
    },
    canvasStyle: function () {
      return {
        width: (this.page.width + this.canvasPadding * 2) + 'px',
        height: (this.page.height + this.canvasPadding * 2) + 'px'
      }
    },
    pageStyle: function () {
      return {
        width: this.page.width + 'px',
        height: this.page.height + 'px',
        top: this.canvasPadding + 'px',
        left: this.canvasPadding + 'px'
      }
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
    test: function () {}
  }
}
</script>

<style>
#app {}
.viewport {
  border: solid 1px;
  overflow-x: auto;
  overflow-y: auto;
  scrollbar-width: none;
  margin: 50px auto 0;
}
.canvas { background-color: lightgray; position: relative; }
.page { background-color: lightcoral; position: absolute; display: relative; }
</style>
